<template>
	<view class="content">
		<view class="pie-content">
			<view id="pieChart" style="width: 500px;height: 300px;"></view>
			<view class="dynamic-content">
				<view class="show-item">
					￥<count-to :startVal="0" :endVal="num" :duration="5000"></count-to>
					<p class="show-text">产品销量</p>
				</view>
				<view class="show-item">
					￥<count-to :startVal="0" :endVal="num" :duration="5000"></count-to>
					<p class="show-text">产品销量</p>
				</view>
			</view>
			<view id="pieChartCircle" style="width: 500px;height: 300px;"></view>

		</view>
		<button @click="tiaozhuan">展示柱状图</button>
	</view>
</template>

<script>
	//npm i echarts
	import * as echarts from "echarts"
	//npm i vue-count-to
	import countTo from "vue-count-to"
	export default {
		data() {
			return {
				num: 500,
				dataDynamic: [],
				chartDynamic: null,

				option2: {
					title: {
						text: '示例',
						left: 'center'
					},
					tooltip: {
						show: true,
						trigger: 'item',
					},
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					series: [{
						name: '销量',
						type: 'pie',
						data: [{
							value: 5,
							name: "name3"
						}, {
							value: 95,
							name: "name2"
						}]
					}],
					animationDuration: 2000,
				},
				optionCircle: {
					title: {
						text: '示例',
						left: 'center'
					},
					tooltip: {
						show: true,
						trigger: 'item',
					},
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					series: [{
						name: '销量',
						type: 'pie',
						radius:['50%','70%'],
						data: [{
								value: 1048,
								name: 'Search Engine'
							},
							{
								value: 735,
								name: 'Direct'
							},
							{
								value: 580,
								name: 'Email'
							},
							{
								value: 484,
								name: 'Union Ads'
							},
							{
								value: 300,
								name: 'Video Ads'
							}
						]
					}],
					animationDuration: 2000,
				},

			}
		},
		components: {
			countTo
		},

		mounted() {
			this.initChart()

		},
		methods: {
			initChart() {
				var chartColumn2 = echarts.init(document.getElementById('pieChart'), 'dark')
				chartColumn2.showLoading()
				chartColumn2.setOption(this.option2)
				chartColumn2.hideLoading()
				var chartColumnCircle = echarts.init(document.getElementById('pieChartCircle'), 'dark')
				chartColumnCircle.setOption(this.optionCircle)

			},
			tiaozhuan() {
				uni.navigateTo({
					url: './index'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		/* flex-wrap: wrap; */
	}

	.pie-content {
		background: black;
		color: white;
	}

	.dynamic-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.show-item {
		font-size: 30px;
	}

	.show-text {
		font-size: 18px;
	}
</style>
